<template lang="pug">
.main
  div(v-show="showMenu")
    .item(@click="openWeb(baseurl.ip + '/download/#/')")
      i.iconfont.icon-zhinan
      .name 办税指南
    .item(@click="openWeb(baseurl.ip + '/download/#/download')")
      i.iconfont.icon-xiazai1
      .name 下载中心
    .item(@click="openWeb(baseurl.ip + '/tax/#/reply')")
      i.iconfont.icon-kefu1
      .name 税务问答
    .item(@click="openWeb('http://wpa.qq.com/msgrd?v=3&uin=990639979&site=qq&menu=yes')")
      i.iconfont.icon-kefu
      .name 联系客服
  //- .menuItem(@click="showMenu=!showMenu" @mouseover.once="showMenu=true")
  //-   i.el-icon-plus(:class="showMenu?'active':null")
  <transition name="el-fade-in">
  .share(v-show="showMenu && showShare")
    img(@click="showShare=false" src="http://onlyouoss.onlyou.com/site/base/2016-09-29/512c8035c6444c58981283e0afb9cb84")
  </transition>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    components: {},
    data() {
      return {
        showMenu: true,
        showShare: false,
      };
    },
    computed: {
      ...mapGetters(["baseurl"])
    },
    methods: {
      openWeb(val) {
        window.open(val);
      }
    },
    created() {
    },
    mounted() {
    }
  };
</script>

<style lang="less" scoped>
  .main {
    position: fixed;
    right: 0;
    bottom: 2.5%;
    z-index: 100;
    opacity: 0.6;
    &:hover {
      opacity: 1;
    }
  }

  .item {
    margin: 10px;
    background: @dark;
    color: @white;
    padding: 0.5em;
    .center;
    .pointer;
    i {
      .size(24px);
    }
    .name {
      .size(13px);
      width: 4em;
      margin-top: 5px;
    }
    &:hover {
      color: @primary;
    }
  }

  .menuItem {
    margin: 10px;
    background: @primary;
    color: #fff;
    padding: 0.5em;
    float: right;
    margin-right: 1.5em;
    .pointer;
    .border;
    .rounded(42px);
    i {
      .size(24px);
      .tran;
    }
    .active {
      transform: rotate(-135deg);
    }
  }

  .share {
    position: absolute;
    right: 100px;
    bottom: 10px;
  }
</style>
